<template>
  <div class="box">
    <div class="item">
      <h4>地区</h4>
      <el-tabs v-model="activeName1" @tab-click="handleClick1">
      <el-tab-pane label="全部" name="全部"></el-tab-pane>
      <el-tab-pane label="内地" name="内地"></el-tab-pane>
      <el-tab-pane label="港台" name="港台"></el-tab-pane>
      <el-tab-pane label="欧美" name="欧美"></el-tab-pane>
      <el-tab-pane label="日本" name="日本"></el-tab-pane>
      <el-tab-pane label="韩国" name="韩国"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="item">
      <h4>类型</h4>
      <el-tabs v-model="activeName2" @tab-click="handleClick2">
      <el-tab-pane label="全部" name="全部"></el-tab-pane>
      <el-tab-pane label="官方版" name="官方版"></el-tab-pane>
      <el-tab-pane label="原声" name="原声"></el-tab-pane>
      <el-tab-pane label="现场版" name="现场版"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="item">
      <h4>排序</h4>
      <el-tabs v-model="activeName3" @tab-click="handleClick3">
      <el-tab-pane label="上升最快" name="上升最快"></el-tab-pane>
      <el-tab-pane label="最热" name="最热"></el-tab-pane>
      <el-tab-pane label="最新" name="最新"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="mv">
      <div class="mv_item" v-for="l in list" :key="l.id" @click="goPlay(l.id)">
        <div class="img">
          <img :src="l.cover" alt="">
          <span><i class="iconfont icon-24gl-play"></i> 播放量:{{l.playCount}}</span>
        </div>
        <div class="text">
          <div><p>{{l.name}}</p></div>
          <span>{{l.artistName}}</span>
        </div>
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      @current-change="pageChange"
      >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'MvPage',
  data(){
    return{
      // 查询结果
      list: [],
      // 地区
      activeName1: '全部',
      // 类型
      activeName2: '全部',
      // 排序
      activeName3: '上升最快',
      total: 20,
      page: 1,
      limit: 8
    }
  },
  methods: {
    getList(){
      this.$axios({
      url: '/mv/all',
      method: 'get',
      params: {
        area: this.activeName1,
        type: this.activeName2,
        order: this.activeName3,
        limit: this.limit,
        offset: (this.page-1)*this.limit
      }
    }).then(res=>{
      // console.log(res.data)
      this.list = res.data.data
      // 处理次数
      for(let i=0;i<this.list.length;i++){
        this.list[i].playCount = this.list[i].playCount>100000?parseInt(this.list[i].playCount/10000)+'万':this.list[i].playCount
      }
      // 总条数 接口bug
      if(res.data.count){
        this.total = res.data.count
      }
      // console.log(this.page)
    })
    },
    handleClick1(){
      // 格式化页数
      this.page = 1
      this.getList()
    },
    handleClick2(){
      // 格式化页数
      this.page = 1
      this.getList()
    },
    handleClick3(){
      // 格式化页数
      this.page = 1
      this.getList()
    },
    pageChange(val){
      this.page = val
      this.getList()
    },
    goPlay(id){
      this.$router.push({
        name: 'mvpage',
        query: {
          q: id
        }
      })
    }
  },
  created(){
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.item{
  position: relative;
  h4{
    position: absolute;
    top: 12px;
  }
  .el-tabs{
    padding-left: 90px;
  }
}
.mv{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .mv_item{
    width: 20%;
    padding: 20px;
    cursor: pointer;
    .img{
      position: relative;
      img{
        display: block;
        width: 100%;
      }
      span{
        display: block;
        position: absolute;
        top: 0;
        color: white;
        font-size: 12px;
      }
    }
    .text{
      width: 100%;
      height: 30%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      div{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        p{
          display: inline;
          white-space: nowrap;
        }
      }
      span{
        font-size: 12px;
        color: #ccc;
      }
    }
  }
}
</style>